<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="教师姓名">
        <el-input v-model="teacherQuery.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="级别">
        <el-select
          v-model="teacherQuery.level"
          clearable
          placeholder="请选择级别"
        >
          <el-option label="高级讲师" :value="1"></el-option>
          <el-option label="首席讲师" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button type="success" icon="el-icon-download" @click="onExport">导出</el-button>
        <el-button @click="onReset" icon="el-icon-refresh-right">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      element-loading-text="嗷嗷加载中..."
      :data="list"
      style="width: 100%"
    >
      <el-table-column label="#" width="70">
        <template slot-scope="scope">{{
          (page - 1) * limit + scope.$index + 1
        }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="levelName" label="级别"> </el-table-column>
      <el-table-column prop="sort" label="排序"> </el-table-column>
      <el-table-column prop="intro" label="简介"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="`/teacher/edit/${scope.row.id}`"
            ><el-button size="mini">编辑</el-button></router-link
          >
          <el-button size="mini" type="danger" @click="deleteById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: center"
      @size-change="changeSize"
      @current-change="getList"
      :current-page="page"
      :page-sizes="[10, 50, 100]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import teacher from "@/api/edu/teacher";

export default {
  data() {
    return {
      list: [],
      page: 1,
      limit: 10,
      total: 0,
      totalPage: 0,
      teacherQuery: {
        name: "",
        level: "",
      },
      listLoading: false,
    };
  },
  created() {
    this.getList(this.page, this.limit, this.teacherQuery);
  },
  methods: {
    getList(page, limit, teacherQuery) {
      this.page = page;
      this.listLoading = true;
      teacher
        .getAll(this.page, this.limit, this.teacherQuery)
        .then((response) => {
          this.list = response.data.result;
          this.total = response.data.count;
          this.page = response.data.currentPage;
          this.totalPage = response.data.totalPage;
          this.listLoading = false;
        });
    },
    edit(index, row) {
      console.log(index, row);
    },
    deleteById(id) {
      this.$confirm("确认删除？")
        .then((_) => {
          teacher.delete(id).then((response) => {
            this.getList(this.page, this.limit, this.teacherQuery);
          });
        })
        .catch((_) => {});
    },
    changeSize(limit) {
      this.limit = limit;
      this.getList(this.page, limit);
    },
    onSubmit() {
      this.getList(this.page, this.limit, this.teacherQuery);
    },
    onReset() {
      this.page = 1;
      this.limit = 10;
      this.teacherQuery.name = "";
      this.teacherQuery.level = "";
      this.getList(this.page, this.limit, this.teacherQuery);
    },
    onExport() {
      teacher.export(this.teacherQuery).then(res => {
        const link = document.createElement('a')
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
        link.style.display = 'none'
        window.console.log(URL.createObjectURL(blob))
        link.href = URL.createObjectURL(blob)

        // link.download = res.headers['content-disposition'] //下载后文件名
        link.download = 'a.xlsx' //下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
  },
};
</script>
